<template>
	<view class="page">
		<!-- 导航区域 -->
		<u-navbar title="订单" :autoBack="true" leftText="返回" bgColor="rgba(255,255,255,0)"></u-navbar>

		<div class="main">
			<div id="order-bg">
				<h1 id="order-status">交易完成</h1>
				<div id="address-info">
					<div style="display: flex;">
						<img src="../../../static/icon/weibiaoti-3 2.png" alt=""
							style="margin-left: 40rpx;width:30rpx ;height: 36rpx;" />
						<span id="address">上海市嘉定区福海梅子冲小区2栋2号201</span>
					</div>
					<div>
						<span id="name-phone">张月兰 131213455672栋2号201</span>
					</div>
					<div style="display: flex;margin-top: 20rpx;position: relative;align-items: center;">
						<img src="../../../static/icon/配送cart.png" alt=""
							style="margin-left: 40rpx;width:32rpx ;height: 32rpx;" />
						<span id="delivery-method-title">配送方式</span>
						<div id="delivery-method">快递 免运费</div>
					</div>
				</div>

				<div id="goods-info-card">
					<ul>
						<li>
							<div style="display: flex;">
								<img id="goods-img" src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
								<div id="goods-info">
									<p id="goods-name">商品名称商品名称商品名称商品名称商品名称商品名称</p>
									<p id="goods-spec">规格：土系</p>
									<div style="position: relative;margin-top: 38rpx;">
										<span id="goods-quantity">x1</span>
										<span id="goods-price">¥999.00</span>
									</div>
								</div>
							</div>
							<div class="dividing-line"></div>
						</li>
						<li>
							<div style="display: flex;margin-top: 30rpx;">
								<img id="goods-img" src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
								<div id="goods-info">
									<p id="goods-name">商品名称商品名称商品名称商品名称商品名称商品名称</p>
									<p id="goods-spec">规格：土系</p>
									<div style="position: relative;margin-top: 38rpx;">
										<span id="goods-quantity">x1</span>
										<span id="goods-price">¥999.00</span>
									</div>
								</div>
							</div>
							<div class="dividing-line"></div>
						</li>
					</ul>
					<div style="display: flex;align-items: center;justify-content: space-between;">
						<div>

						</div>
						<div>
							<span style="color: #333;font-size: 28rpx;text-align: right;">合计¥</span>
							<span id="total-price">999.00</span>
						</div>

					</div>

				</div>

				<div id="timeline-card">
					<ul>
						<li id="timeline">订单编号: 8472823122143434543</li>
						<li id="timeline">订单编号: 8472823122143434543</li>
						<li id="timeline">订单编号: 8472823122143434543</li>
					</ul>
				</div>

				<div id="view-logistics">
					查看物流路径
				</div>


			</div>

			<div id="bottom-btns"></div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				urls: [],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg'
			}
		},
		onLoad() {

		},
		methods: {

		},
	}
</script>

<style lang="scss">
	.main {
		width: 750rpx;
		height: 1370rpx;
		background-color: rgb(242, 242, 242);
		position: fixed;
		top: 90rpx;

	}

	ul {
		padding: 0;
	}

	li {
		list-style-type: none;

	}

	.dividing-line {
		background-color: #f3f3f3;
		height: 1rpx;

		margin-top: 48rpx;
	}


	#order-bg {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	//订单状态文字
	#order-status {
		font-size: 52rpx;
		color: #333;
		margin-top: 68rpx;
	}

	//地址信息卡片
	#address-info {
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0rpx 12rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	//收货地址文字	
	#address {
		font-size: 28rpx;
		color: #333;
		text-align: left;
		margin-left: 20rpx;
		margin-right: 30rpx;

	}

	//姓名手机号
	#name-phone {
		font-size: 24rpx;
		color: #333;
		display: inline-block;
		margin-top: 20rpx;
		margin-left: 90rpx;
	}

	//配送方式标题
	#delivery-method-title {
		font-size: 28rpx;
		color: #333;
		text-align: left;
		font-weight: 500;
		margin-left: 20rpx;
	}

	//配送方式
	#delivery-method {
		position: absolute;
		right: 30rpx;
		font-size: 28rpx;
		color: #333;
		text-align: right;
		font-weight: 400;
	}

	//商品信息卡片
	#goods-info-card {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0rpx 12rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		position: relative;
	}

	//商品信息
	#goods-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		margin-left: 30rpx;
	}

	#goods-info {
		height: 160rpx;
		width: 100%;
		margin-left: 30rpx;
	}

	//商品名
	#goods-name {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 32rpx;
		color: #303133;
		line-height: 46rpx;
		margin-right: 30rpx;
		text-align: left;
		font-style: normal;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	//商品规格
	#goods-spec {

		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 24rpx;
		color: #909399;
		line-height: 34rpx;
		margin-top: 8rpx;
		text-align: left;
		font-style: normal;
	}

	//商品数量
	#goods-quantity {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	//商品单价格
	#goods-price {
		position: absolute;
		right: 30rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 46rpx;
		text-align: right;
		font-style: normal;
	}

	//总计
	#total-price {
		text-align: right;
		margin-right: 30rpx;
		font-size: 32rpx;
		color: #333;

	}

	#timeline-card {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0rpx 12rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		position: relative;
	}

	#timeline {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-left: 30rpx;
	}

	#view-logistics {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0rpx 12rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		position: relative;

		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}


	#bottom-btns {
		width: 100%;
		color: white;
		padding-top: 42rpx;
		padding-bottom: 38rpx;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
</style>